import React from 'react';
// 导入prop-types(props数据类型校验包)
import PropTypes from 'prop-types';

export default class App extends React.Component{

    static defaultProps={
        counter:PropTypes.number.isRequired,
        increment:PropTypes.func.isRequired,
        decrement:PropTypes.func.isRequired,
        incrementAsync:PropTypes.func.isRequired
    }

    constructor(props){
        super(props);
        this.state={
            step:1
        }
    }
    render(){
        // const count=this.props.store.getState();
        const count=this.props.counter;
        return <div>
            <h1>计数器:{count}</h1>
            <hr/>
            步长:<select onChange={(e)=>this.stepChange(e)}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </select>
            &nbsp;
            <button onClick={()=>this.increment()}>增加+</button>
            &nbsp;
            <button onClick={()=>this.decrement()}>减少-</button>
            &nbsp;
            <button onClick={()=>{this.incrementAsync()}}>异步增加+</button>
        </div>
    }

    // 手动实现select下拉框的数据双向绑定
    stepChange(e){
        this.setState({
            step:e.target.value
        });
        // this.props.store.step.dispatch({type:true,data:e.target.value});
    }

    // 增加计数器
    increment(){
        const step=this.state.step;
        // 手动构建action对象
        // this.props.store.dispatch({type:'increment',data:step});
        // 通过函数创建action对象
        // this.props.store.dispatch(actions.increment(step));
        this.props.increment(step);

    }

    // 异步增加计时器 
    incrementAsync(){
        const step=this.state.step;
        // 1s之后再增加计数器
        this.props.incrementAsync(step);
    }

    // 减少计数器
    decrement(){
        const step=this.state.step;
        // 手动构建action对象
        // this.props.store.dispatch({type:'decrement',data:step});
        // 通过函数创建action对象
        // this.props.store.dispatch(actions.decrement(step));
        this.props.decrement(step);

    }
}